import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import LikeInput from '../../components/LikeInput';

import styles from './style';
import {
  getPaperDetail,
  beginAswPaper,
  aswQuestion,
  aswQuestionList,
} from '../../service/common';
import BaseUrl from '../../config/BaseUrl';

const ReadingDetail = (props) => {
  const navigation = useNavigation();
  const [data, setData] = useState({});
  const [fullScreen, setFullScreen] = useState(0);
  const [apId, setApId] = useState({});
  const [aqId, setAqId] = useState({});
  const [answer, setAnswer] = useState();
  const [startP, setStartP] = useState({pageX: 0, pageY: 0});
  const [endP, setEndP] = useState({pageX: 0, pageY: 0});

  useEffect(() => {
    navigation.setOptions({
      title: '阅片详情',
    });
  }, []);

  // 手势操作
  const setAswQuestion = () => {
    aswQuestion({
      apId,
      aqId,
      aswQstOptions: [
        {
          aqoLux: startP.pageX,
          aqoLuy: startP.pageY,
          aqoRdx: endP.pageX,
          aqoRdy: endP.pageY,
        },
      ],
    }).then((res) => {
      console.log(res);
      setAnswer(res.data);
    });
  };

  const onPressIn = (evt) => {
    console.log(evt.nativeEvent);
    setStartP(evt.nativeEvent);
  };
  const onPressOut = (evt) => {
    console.log(evt.nativeEvent);
    setEndP(evt.nativeEvent);
  };
  return (
    <AreaView>
      <TouchableOpacity
        style={fullScreen ? styles.content_container : {display: 'none'}}
        onPressIn={(evt) => {
          onPressIn(evt);
        }}
        onPressOut={(evt) => {
          onPressOut(evt);
        }}>
        <Image
          resizeMode="contain"
          style={
            fullScreen
              ? {
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: null,
                  height: null,
                  backgroundColor: 'rgba(0,0,0,0)',
                }
              : {display: 'none'}
          }
          source={{uri: BaseUrl.imgurl + data?.epImage}}
        />
        <View
          style={[
            styles.answer_border,
            {
              width: endP.pageX - startP.pageX,
              height: endP.pageY - startP.pageY,
              left: startP.pageX,
              top: startP.pageY,
            },
          ]}></View>
      </TouchableOpacity>

      <View style={fullScreen ? {display: 'none'} : {display: 'flex'}}>
        <TouchableOpacity
          onPress={() => {
            setFullScreen(1);
          }}>
          <Image
            style={styles.list_img}
            source={{uri: BaseUrl.imgurl + data?.epImage}}
          />
        </TouchableOpacity>
        <View style={styles.next}>
          <View style={styles.next_bj}>
            <Text style={styles.next_bj_text}>上一张</Text>
          </View>
          <View style={[styles.next_bj, styles.ml56]}>
            <Text style={styles.next_bj_text}>下一张</Text>
          </View>
        </View>
      </View>
      <LikeInput />
    </AreaView>
  );
};

export default ReadingDetail;
